<template>
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      action="#"
      :data="option.data"
      accept="image/jpeg,image/jpg,image/png"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :http-request="httpRequest"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar"  @mouseover="enterUpload" @mouseenter="enterUpload"/>
      <div v-else class="describe">
        <i class="el-icon-camera-solid avatar-uploader-icon"></i>
        <div slot="tip" class="el-upload__tip">
          {{option.title}}
        </div>
      </div>
    </el-upload>
    <div class="upload-actions" v-show="actionsShow"  @mouseout="leaveUpload" @mouseleave="leaveUpload">
      <i class="el-icon-error" @click="removeUpload"></i>
      <p>SELFIE</p>
      <p>UPLOADED</p>
    </div>
  </div>
</template>
<script>
export default {
  props: ['option'],
  data() {
    return {
      imageUrl: '',
      disabled: false,
      actionsShow: false
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPEG = file.type === 'image/jpeg';
      const isJPG = file.type === 'image/png';
      const isPNG = file.type === 'image/png';
      console.log(file.type, 'file.type')
      if (!isJPG && (!isJPEG && !isPNG)) {
        this.$message.error('The uploaded image can only be in JPG or PNG format!');
      }  else {
        this.imageUrl = URL.createObjectURL(file);
      }
      return isJPG && (isJPEG && isPNG);
    },
    httpRequest(res) {
      this.$emit("httpRequest", res)
    },
    /**
     * [enterUpload description]
     * 移入显示
     * --------------------------
     * @Author   LLP
     * @DateTime 2019-12-26T16:20:09+0800
     * @return   {[type]}                 [description]
     */
    enterUpload() {
      this.actionsShow = true
    },
    /**
     * [leaveUpload description]
     * 移出消失
     * -------------------------
     * @Author   LLP
     * @DateTime 2019-12-26T16:20:38+0800
     * @return   {[type]}                 [description]
     */
    leaveUpload() {
      this.actionsShow = false
    },
    /**
     * [removeUpload description]
     * 取消
     * ----------------------
     * @Author   LLP
     * @DateTime 2019-12-26T16:22:48+0800
     * @return   {[type]}                 [description]
     */
    removeUpload() {
      this.imageUrl = ""
    }
  }
};
</script>
<style lang="less">
.upload {
  display: inline-block;
  padding: 15px;
  position: relative;
  .avatar-uploader {
    position: relative;
    .el-upload {
      width: 250px;
      height: 170px;
      border: 1.5px dashed #faad47;
      position: relative;
      background: #fff4e3;
      cursor: pointer;
      overflow: hidden;
    }
    .upload-mask {
      position: absolute;
    }
    .describe {
      width: 250px;
      height: 170px;
      margin-top: 45px;
      text-align: center;
      position: absolute;
      .avatar-uploader-icon {
        font-size: 35px;
        color: #faad47;
        text-align: center;
      }
      .el-upload__tip {
        color: #faad47;
      }
    }
    .avatar {
      width: 250px;
      height: 170px;
      display: block;
    }
  }
  .upload-actions {
    position: absolute;
    top: 15px;
    z-index: 2;
    left: 15px;
    width: 250px;
    height: 170px;
    background: rgba(251, 189, 107, 0.8);
    padding-top: 40px;
    cursor: pointer;
    .el-icon-error {
      position: absolute;
      top: -18px;
      right: -18px;
      font-size: 35px;
    }
    p {
      font-size: 25px;
      color: #fff4e3;
    }
  }
}
</style>  